<template>
  <div class="container">
    <header>
      <a-menu v-model:selectedKeys="current" mode="horizontal">
        <a-menu-item key="sub1">
          <template #icon>
            <mail-outlined />
          </template>
          Navigation One
        </a-menu-item>
        <a-menu-item key="sub2">
          <template #icon>
            <mail-outlined />
          </template>
          Navigation Two
        </a-menu-item>
        <a-menu-item key="sub3">
          <template #icon>
            <mail-outlined />
          </template>
          Navigation Three
        </a-menu-item>
        <a-menu-item key="sub4">
          <template #icon>
            <mail-outlined />
          </template>
          Navigation Four
        </a-menu-item>
      </a-menu>
    </header>

    <section>
      <div class="left">
        <NestedDraggable :datum="defaultNestedData" :id="0">
          <p>2323</p>
        </NestedDraggable>
      </div>

      <div class="cont">
        <Middraggable>
          <p>aaaa</p>
        </Middraggable>
      </div>

      <div class="right">
        <Text>aa</Text>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import type { LayoutNested } from "#/Nested";
import { ref } from "vue";
import { MailOutlined } from "@ant-design/icons-vue";

const current = ref<string[]>(["sub1"]);

const compsList = [
  {
    code: "MyInput",
    name: "输入框",
    desc: "输入框的描述",
    icon: "input",
    props: {
      name: "字段名称",
      label: "label名称",
      labelCol: "",
      wrapperCol: "",
      required: false
    }
  }
];

console.log("compsList", compsList);

const defaultNestedData: LayoutNested[] = [
  {
    id: 1,
    title: "1",
    children: [
      {
        id: 11,
        title: "11"
      },
      {
        id: 12,
        title: "12"
      }
    ]
  },
  {
    id: 2,
    title: "2",
    children: [
      {
        id: 21,
        title: "21"
      },
      {
        id: 22,
        title: "22"
      }
    ]
  }
];
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;

  header {
    width: 100%;
    height: 46px;
  }

  section {
    width: 100%;
    height: calc(100% - 46px);
    display: flex;

    .left,
    .right {
      width: 400px;
      height: 100%;
      background-color: #eee;
    }

    .cont {
      flex: 1;
    }
  }
}
</style>
